<script setup>
import {ref,onMounted} from "vue";
import adminCommunal from "@/components/communal/admin-communal.vue";
import { NButton, NSpace, NImage } from "naive-ui";
import {selectAll} from "@/res/api/admin_api.js"
import {post_banUser} from "@/res/api/admin_api.js"
import {updateUser} from "@/res/api/admin_api.js"

// let page = ref(2)
function pageChangeClick(page) {
  $message.destroyAll()
  $message.success(page)
}

let data = ref([]);

selectAll({
  // pageNum:1,
  // pageSize:10,
  // username : ''
}).then(res=> {
  data.value = res.data.list.map(item => ({
    id : item.id,
    username: item.username,
    createTime: item.updateTime,
    updateTime: item.updateTime,
    email: item.email,
    phone: item.phone,
    role: item.role,
    // state: item.state,
    state: item.state,
    btns: item.state === 1
        ? ['解封', '编辑'] // 如果状态是1，则改变按钮文本
        : ['封禁', '编辑'] // 如果状态是0，则保持原样
  }))
  console.log(data.value)
})
// const createData = ref([
//     {id: 40, username: 'yt123123', password: '8AE6435394318DE9E253A256C68261F0'},
//   {id: 40, username: 'yt123123', password: '8AE6435394318DE9E253A256C68261F0'},
//   {id: 40, username: 'yt123123', password: '8AE6435394318DE9E253A256C68261F0'}
// ])
// console.log(createData.value)

// const createData = data.value.map((item,index)=>[{
//
// }])
// console.log(createData)
//表格设置
const createColumns = ({
                         ban,
                         edit
                       }) => {
  return [
    {
      title: "用户头像",
      key: "userImg",
      width: 100,
      render(row) {
        return h(
            NSpace,
            {

            },
            {
              default: ()=> row.userImg
            }
        )
      }
    },
    {
      title: "用户名",
      key: "username"
    },
    {
      title: "邮箱",
      key: "email"
    },
    {
      title: "手机号",
      key: "phone"
    },
    {
      title: "状态",
      key: "state"
    },
    {
      title: "创建时间",
      key: "createTime",
      ellipsis: true
    },    {
      title: "修改时间",
      key: "updateTime",
      ellipsis: true
    },

    {
      title: "角色",
      key: "role"
    },
    {
      title: "管理员操作",
      key: "actions",
      width: 200,
      fixed: "right",
      render(row) {
        return h(
            NSpace,
            {

            },

            {
              default: row.btns.map((btnKey)=>{
                let state = "";
                if (row.state === 0){
                  state = "封禁"
                }
                if (row.state === 1){
                  state = "解封"
                }
                return h(
                    NButton,
                    {
                      text: true,
                      type: 'info',

                      onClick: () => {
                        if(btnKey === state){
                          return ban(row)
                        }
                        if(btnKey==='编辑'){
                          return edit(row)
                        }
                      }
                    },
                    {
                      default: ()=> btnKey
                    }
                )
              })
            }
        )
      }
    }
  ];
};

const columns= createColumns({
  ban(row) {
    if(row.state === 0){
      $dialog.error({
        title: "封禁账户",
        content: "确定要封禁账户吗？",
        positiveText: "确定",
        negativeText: "不确定",
        onPositiveClick: () => {
          post_banUser({
            userId : row.id,
            state : row.state
          }).then((res)=>{
            $message.info(res.message);
          })
          window.location.reload()
        }
      })
    }
    if (row.state === 1){
      $dialog.error({
        title: "解封账户",
        content: "确定要解封账户吗？",
        positiveText: "确定",
        negativeText: "不确定",
        onPositiveClick: () => {
          post_banUser({
            userId : row.id,
            state : row.state
          }).then((res)=>{
            selectAll()
            $message.info(res.message);
          })

        }
      })
    }
  },

  edit(row) {
    showEditModal.value = true;
    model.value = {...row}
  },
})
const showEditModal = ref(false);

let model = ref({
  username: '',
  phone : '',
  email : '',
  id: '',
});
function saveEdit(){
  console.log(model.value)
  showEditModal.value = false
  updateUser({
    username : model.value.username,
    phone : model.value.phone,
    email : model.value.email,
    id : model.value.id
  }).then((res)=>{
    $message.info(res.message);
    window.location.reload()
  })
}

// console.log(da)
// TODO
//每页显示的条数
let pagination= {
  pageSize: 10
}

</script>

<template>
  <admin-communal nav="users">
    <n-card>
      <n-tabs type="card" animated>

        <n-tab-pane name="chap1" tab="全体用户" class="layout-sider">
          <n-data-table
              :data="data"
              :columns="columns"
              :pagination="pagination"
              :bordered="false"
              :single-line="true"

          />
        </n-tab-pane>

        <n-tab-pane name="chap2"  tab="封禁用户" class="layout-sider">
          <n-data-table
              :data="data"
              :columns="columns"
              :pagination="pagination"
              :bordered="false"
              :single-line="false"
              single-column
          />
        </n-tab-pane>
      </n-tabs>
    </n-card>
  </admin-communal>


  <template>
    <n-modal v-model:show="showEditModal">
      <n-card title="编辑用户" style="width: 600px">
        <!-- 这里放置编辑用户信息的表单 -->
        <n-form ref="formRef" :model="model">
          <n-form-item pass="id" label="id">
            <n-input
                v-model:value="model.id"
                type="text"
                disabled
            />
          </n-form-item>
          <n-form-item label="姓名">
            <n-input v-model:value="model.username"  />
          </n-form-item>
          <n-form-item  label="手机号">
            <n-input
                v-model:value="model.phone"
                type="text"
            />
          </n-form-item>
          <n-form-item  label="qq邮箱">
            <n-input
                v-model:value="model.email"
                type="text"
            />
          </n-form-item>
        </n-form>

        <template #footer>
          <n-button @click="showEditModal = false">取消</n-button>
          <n-button type="primary" @click="saveEdit">保存</n-button>
        </template>
      </n-card>
    </n-modal>
  </template>


</template>

<style scoped>

</style>